<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等</h1>

    <button onclick="fn()"> 这是一个点击事件按钮 </button>

    <input type="text" onfocus="Focusfn()" onblur="Blurfn()">

    <script>
        // 事件          描述
        // onClick     点击事件
        // onMouseOver 鼠标经过
        // onMouseOut  鼠标移出
        // onChange    内容改变
        // onSelect    文本被选中
        // onFocus     获得焦点
        // onBlur      失去焦点
        // 这个事件它就是一个函数触发的条件材
        // 我们怎么绑定事件到html元素上呢？

        // 事件绑定JavaScript 绑定事件的方法有三种，
        // 1.`HTML`属性
        // 2.`DOM`属性
        // 3.`addEventListener'方法

        function fn() {
            alert("hello")
        }

        function Focusfn() {
            // alert("获取焦点")
            console.log("获取焦点")
        }

        function Blurfn() {
            // alert("失去焦点")
            console.log("失去焦点")
        }
    </script>
</body>

</html>